<!doctype html>
<html>
{#<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
#}{#    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">#}{#
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.2/weui.min.css">
    <!-- 引入 WeUI -->
    #}{#    <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">#}{#
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
</head>#}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="微信,WeUI,示例,案例">
    <meta name="description" content="WeUI 为微信 Web 服务量身设计">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/weui.min.css') }}">
    <style type="text/css">body {
        background-color: #efeff4
    }</style>
    <style type="text/css">.weui_avatar {
        width: 52px;
        height: 52px;
        border-radius: 4px;
        vertical-align: middle
    }</style>
    <style type="text/css"></style>
    <style type="text/css">.swiper, .swiper-wrapper {
        overflow: hidden
    }

    .swiper {
        height: 200px;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .item {
        height: 100%;
        background-position: 50%;
        background-size: cover;
        position: relative;
        overflow: hidden;
        float: left
    }

    .item.active .animated {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        opacity: 1
    }

    .item:not(.active) .animated {
        -webkit-animation: none;
        animation: none;
        opacity: 0
    }</style>
    <style type="text/css">.weui_cells_checkbox > .weui_cell > *, .weui_cells_radio > .weui_cell > * {
        pointer-events: none
    }</style>
    <style type="text/css"></style>
    <style type="text/css">.weui_panel {
        margin-top: 0
    }

    .weui_pull {
        -webkit-transform: translate3d(0, -40px, 0);
        transform: translate3d(0, -40px, 0)
    }

    .weui_pull_tips {
        text-align: center;
        font-size: 12px;
        padding: 10px;
        color: #888
    }

    .weui_pull_loading {
        width: 16px;
        height: 16px;
        display: inline-block;
        vertical-align: -4px;
        -webkit-animation: loadingAnimation 1s steps(12) infinite;
        animation: loadingAnimation 1s steps(12) infinite;
        background: transparent url() no-repeat;
        background-size: 100%
    }

    @-webkit-keyframes loadingAnimation {
        0% {
            -webkit-transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(1turn)
        }
    }

    @keyframes loadingAnimation {
        0% {
            -webkit-transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(1turn)
        }
    }
    </style>
</head>
<body ontouchstart>
<div id="container">
    <div class="weui_cells_title">已绑定设备列表</div>
    <div class="weui_cells weui_cells_access">
        <span class="weui_cell ">
            <div class="weui_cell_hd">
                <p style="margin-right: 20px">名称</p>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <p>序列号</p>
            </div>
            <div class="weui_cell_hd">
                绑定日期
            </div>
        </span>

        <div class="weui-cell weui-cell_swiped">
            <div class="weui_cell_hd">
                <p style="margin-right: 20px">小明</p>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <p>2234U83UIXJI</p>
            </div>
            <div class="weui_cell_ft">
                2017.6.13
            </div>
        </div>
    </div>
</div>
<script
        src="https://code.jquery.com/jquery-1.11.2.min.js"
        integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA="
        crossorigin="anonymous"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>

<script type="text/javascript">
    (function (window, $) {
        var fInitWeixin = function (d) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wxe566d7c50a4d2cf9', // 必填，公众号的唯一标识
                timestamp: d.timestamp, // 必填，生成签名的时间戳
                nonceStr: d.noncestr, // 必填，生成签名的随机串
                signature: d.signature,// 必填，签名，见附录1
                jsApiList: ['onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        }
        $.ajax({
            type: 'post',
            url: '/get_signature',
            dataType: 'json',
            data: {url: location.href},
            success: function (d) {
                fInitWeixin(d)
                $('.weui-cell_swiped').swipeout()
                //fShare()
            }
        })
        var fShare = function () {
            wx.onMenuShareTimeline({
                title: '分享测试', // 分享标题
                link: 'www.qq.com', // 分享链接
                imgUrl: '', // 分享图标
                success: function () {
                    $.ajax({
                        type: 'get',
                        url: 'main/ajax/log',
                        dataType: 'json',
                        success: function (d) {
                            $('#div').html('成功')
                        }
                    })
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        }
    })(window, jQuery)
</script>
</body>
</html>
